<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记录点击次数</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>点击次数：{{count}}</h2>
        <!-- 使用事件表达式完成事件操作
        <button @click="{count+=1}">点击-表达式</button> -->

        <!--获取事件对象-->
        <div @click="ClickParent">
            <!--.stop 修饰符 阻止事件向上冒泡-->
            <button @click.stop="ClickEvent">点击-事件对象</button>
        </div>

        <form action="" method="post">
            <span>查询天气：</span>
            <input type="text" name="username" @keydown.shift="SearchWeather" placeholder="城市" id="" value="" v-model='city'>
            <!--.prevent 修饰符 阻止默认事件-->
            <input type="submit" @click.prevent="SearchWeather" value="提交">
        </form>
        <div id="Weather">
            <h1>{{tmp}}</h1>
            <h3>{{brief}}</h3>
        </div>

        <div>
            <h1>once修饰符：只触发一次</h1>
            <button type="button" @click.once="OnceEvent">只触发一次</button>
        </div>

        <div>
            <button type="button" @click.ctrl.exact="CtrlEvent">ctrl事件</button:t>
        </div>

    </div>
    <script>
        //配置按键的自定义修饰符
        Vue.config.keyCodes.f1=112  //f1按键
        let app=new Vue({
            el:"#app",
            data:{
                count:0,
                city:'',
                tmp:'',
                brief:''
            },
            methods:{
                ClickEvent:function(e){
                    console.log("ClickEvent")
                    this.count++;
                },
                ClickParent:function(){
                    console.log('ClickParent')
                },
                SearchWeather:async function(){                    
                    let httpUrl=`https://free-api.heweather.net/s6/weather/now?location=${this.city}&key=13be98c0b4f04a08b701e9689b043c29`;
                    console.log(httpUrl)
                    let res=await fetch(httpUrl)
                    let result=await res.json()
                    let now =result.HeWeather6[0].now;
                    console.log(now)
                    this.tmp=now.tmp;
                    this.brief=now.cond_txt;
                },
                OnceEvent:function(){
                    console.log('事件只触发一次')   
                },
                CtrlEvent:function(){
                    console.log('CtrlEvent')
                }
            }
        })
    </script>
</body>
</html